<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            <span id="ehint"></span>
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            <span id="phint"></span>
        </div>
        
        <button type="submit" class="btn btn-primary" id="mybtn">Submit</button>
    </form>

    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function () {
            'use strict';
            window.addEventListener('load', function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();

        let e = document.getElementById('exampleInputEmail1');
        let p = document.getElementById('exampleInputPassword1');

        e.onblur = function(){
            let patt = /^[0-9a-zA-Z]{3,18}@[0-9a-zA-Z]{3,18}.com$/;
            if(patt.test(e.value)){
                document.getElementById('ehint').innerText = '正确';
                document.getElementById('ehint').style.color = 'green';
            }else{
                document.getElementById('ehint').innerText = '格式错误';
                document.getElementById('ehint').style.color = 'red';
            }
        }
        p.onblur = function(){
            let patt = /^[0-9a-zA-Z]{6,18}$/;
            if(patt.test(p.value)){
                document.getElementById('phint').innerText = '正确';
                document.getElementById('phint').style.color = 'green';
            }else{
                document.getElementById('phint').innerText = '格式错误';
                document.getElementById('phint').style.color = 'red';
            }
        }
        document.getElementById('mybtn').onclick = function(){
            if(!e.value){
                document.getElementById('ehint').innerText = '请输入邮箱地址';
                document.getElementById('ehint').style.color = 'red';
                return false;
            }
            if(!p.value){
                document.getElementById('phint').innerText = '请输入密码';
                document.getElementById('phint').style.color = 'red';
                return false;
            }
        }
    </script>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>